<template>
  <view class="out" :style="{'background-color':backColor,'margin':isFull?0:margin,'padding':pad}"
    :class="{'card-border':border}">
    <slot>
    </slot>
  </view>
</template>

<script>
  /**
   * @property {String} backColor 背景色
   * @property {Boolean} isFull 卡片是否通栏 为true时去除magin值
   * @property {String} margin 卡片外边距
   * @property {String} pad 卡片内边距
   * @property {Boolean} border 卡片边框
   */
  export default {
    props: {
      backColor: {
        type: String,
        default: '#fff'
      },
      isFull: {
        // 内容区域是否通栏
        type: Boolean,
        default: false
      },
      margin: {
        type: String,
        default: '20rpx'
      },
      pad: {
        type: String,
        default: '30rpx 20rpx'
      },
      border: {
        type: Boolean,
        default: false
      }
    },
  }
</script>

<style lang="scss" scoped>
  .out {
    border-radius: 10rpx;
    padding: $pd20;
  }

  .card-border {
    border: solid 2rpx $border-line;
  }
</style>
